<template>
  <div class="content">
    <div class="sys-menu">
      <div @click="sentSysId('1')">
        <div class="bg"></div>
        <div class="menu-text">
          <p>医院</p>
          <p>Hospital</p>
        </div>
      </div>
      <div @click="sentSysId('2')">
        <div class="bg"></div>
        <div class="menu-text">
          <p>工业</p>
          <p>Industry</p>
        </div>
      </div>
      <div @click="sentSysId('3')">
        <div class="bg"></div>
        <div class="menu-text">
          <p>政府</p>
          <p>Government</p>
        </div>
      </div>
      <div @click="sentSysId('4')">
        <div class="bg"></div>
        <div class="menu-text">
            <p>环保</p>
            <p>Environment</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'home1',
    data () {
      return {
        ems:'home1'
      }
    },
    methods: {
      sentSysId: function (id) {
        this.$http({
          method: 'GET',
          url: "http://localhost:9001/vqdisplay/page/switch?flag="+id,
        })
        .then(function (response) {
          // console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        })
      }
    }
  }
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }
  .content {
    position: absolute;
    width: 100%;
    height: 100vh;
    color: #fff;
  }
  .sys-menu {
    width: 100%;
    height: 240px;
    display: flex;
  }
  .sys-menu > div {
    height: 100%;
    flex-grow: 1;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px 4px rgba(0,0,0,.12);
    
  }
  .sys-menu > div > .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;  
    background-position: center;
    filter: blur(4px);
    transform: scale(1.2);
    z-index: -1;
  }
  .sys-menu > div:nth-child(1) > .bg {
    background-image: url(~@/assets/menu-hospital.jpg);
  }
  .sys-menu > div:nth-child(2) > .bg {
    background-image: url(~@/assets/menu-industry.jpg);
  }
  .sys-menu > div:nth-child(3) > .bg {
    background-image: url(~@/assets/menu-gov.jpg);
  }
  .sys-menu > div:nth-child(4) > .bg {
    background-image: url(~@/assets/menu-water.jpg);
  }
  .menu-text {
    margin-top: 60px;
    font-size: 40px;
    letter-spacing: 6px;
    text-shadow: 2px 2px 4px rgba(0,0,0,.12);
  }
  .menu-text p {
    margin: 0
  }
  .menu-text p:nth-child(2) {
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: 100;
  }
  .cube {
    height: 200px;
    width: 200px;
        
    background-size: cover;  
    background-position: center;
    background-image: url(~@/assets/menu-hospital.jpg);
    -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    -moz-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: 1s clip-path;
  }

</style>